<template>
	<view class="container">
		<!-- Logo区域 -->
		<view class="logo-section">
			<view class="logo-container">
				<image class="logo" src="/static/log.png" mode="aspectFit"></image>
			</view>
			<text class="app-name">明渠智测</text>
			<text class="app-version">{{versi}}</text>
		</view>

		<!-- 菜单列表 -->
		<view class="menu-scroll" scroll-y>
			<view class="menu-list">
				<!-- 菜单组 -->
				<view class="menu-group">
					<view class="menu-item" @tap="navigateTo('账户管理')">
						<view class="menu-left">
							<view class="menu-icon account-icon"></view>
							<text class="menu-text">账户管理</text>
						</view>
						<view class="menu-arrow">›</view>
					</view>

					<view class="menu-item" @tap="navigateTo('系统设置')">
						<view class="menu-left">
							<view class="menu-icon settings-icon"></view>
							<text class="menu-text">系统设置</text>
						</view>
						<view class="menu-arrow">›</view>
					</view>
					
					<view class="menu-item" @tap="navigateTo('帮助与教程')">
						<view class="menu-left">
							<view class="menu-icon help-icon"></view>
							<text class="menu-text">帮助与教程</text>
						</view>
						<view class="menu-arrow">›</view>
					</view>
					<view class="menu-item" @tap="navigateTo('版本升级')">
						<view class="menu-left">
							<view class="menu-icon update-icon"></view>
							<text class="menu-text">版本升级</text>
							<!-- <view class="update-badge" v-if="hasUpdate">有新版本</view> -->
						</view>
						<view class="menu-arrow">›</view>
					</view>
					<view class="menu-item" @tap="navigateTo('关于')">
						<view class="menu-left">
							<view class="menu-icon about-icon"></view>
							<text class="menu-text">关于</text>
						</view>
						<view class="menu-arrow">›</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部备案号 -->
<!-- 		<view class="footer">
			<text>冀ICP备16009060号-4A</text>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasUpdate: true ,// 模拟有新版本
				versi:'' //版本号
			}
		},
		onShow() {
			// this.landleFinish()
		},
		methods: {
			navigateTo(page) {
				// uni.showToast({
				// 	title: `跳转到${page}`,
				// 	icon: 'none',
				// 	duration: 1000
				// })
				if(page == '账户管理'){ 
					uni.navigateTo({
					  url: '/pages/login'
					})
				}
				if(page == '帮助与教程'){ 
					uni.navigateTo({
					  url: '/pages/index/helpAndTutorial?name=' + page
					})
				}
				if(page == '版本升级'){
					uni.navigateTo({
						url: '/pages/index/renewal'
					});
				}
				if(page == '关于'){
					uni.navigateTo({
					  url: '/pages/settings/about'
					})
				}
				// 实际项目中这里应该写页面跳转
				// uni.navigateTo({
				//   url: `/pages/${page}/index`
				// })
			},
		}
	}
</script>

<style lang="scss" scoped>
.container {
	background-color: #f8fafc;
	display: flex;
	flex-direction: column;
	min-height: 100vh;

	.logo-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx 40rpx 40rpx;
		background: white;
		border-radius: 0 0 40rpx 40rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		margin-bottom: 20rpx;

		.logo-container {
			.logo {
				width: 160rpx;
				height: 160rpx;
				border-radius: 16rpx;
			}
		}

		.app-name {
			font-size: 40rpx;
			font-weight: 700;
			color: #2d3748;
			margin-bottom: 8rpx;
			letter-spacing: 1rpx;
		}

		.app-version {
			font-size: 26rpx;
			color: #a0aec0;
			font-weight: 500;
		}
	}

	.menu-scroll {
		flex: 1;
		padding: 0 30rpx 30rpx;

		.menu-list {
			.menu-group {
				background: white;
				border-radius: 24rpx;
				overflow: hidden;
				box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.06);
				padding: 0 20rpx;

				.menu-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 32rpx 20rpx;
					border-bottom: 1rpx solid #f1f5f9;
					transition: all 0.3s ease;
					margin: 0 10rpx;

					&:last-child {
						border-bottom: none;
					}

					&:active {
						background-color: #f8fafc;
						transform: translateX(4rpx);
					}

					.menu-left {
						display: flex;
						align-items: center;
						flex: 1;

						.menu-icon {
							width: 64rpx;
							height: 64rpx;
							margin-right: 24rpx;
							border-radius: 16rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							position: relative;
							overflow: hidden;
							
							&::after {
								content: '';
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
							}
						}

						.account-icon {
							background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
						}
						
						.settings-icon {
							background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
						}
						
						.help-icon {
							background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
						}
						
						.about-icon {
							background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
						}
						
						.update-icon {
							background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
						}

						.menu-text {
							font-size: 34rpx;
							color: #2d3748;
							font-weight: 500;
							flex: 1;
						}

						.update-badge {
							background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
							color: white;
							font-size: 22rpx;
							padding: 8rpx 16rpx;
							border-radius: 20rpx;
							margin-left: 20rpx;
							font-weight: 600;
							box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
						}
					}

					.menu-arrow {
						color: #cbd5e0;
						font-size: 36rpx;
						font-weight: 300;
						margin-left: 20rpx;
						transition: transform 0.3s ease;
					}
					
					&:active .menu-arrow {
						transform: translateX(8rpx);
						color: #667eea;
					}
				}
			}
		}
	}

	/* 底部备案号 */
	.footer {
		text-align: center;
		padding: 20rpx 0 40rpx;
		font-size: 22rpx;
		color: #a0aec0;
	}
}
</style>

<style>
	page {
		background-color: #f8fafc;
	}
</style>
